<template>
	<view class="login">
		<view :style="{ height: statusBarHeight + 'px'}"></view>
		<!-- 返回 -->
		<uni-icons type="left" size="23" color="#000000"
			:style="{ height: titleBarHeight + 'px', lineHeight: titleBarHeight + 'px'}" class="left-icon"
			@click="onClickBack"></uni-icons>

		<!-- logo -->
		<view class="logoc">

			<image src="https://limsapi.gzhbcss.com/static/logo.png" style="width: 400rpx;height: 400rpx;"></image>
			<view class="lotitle">汇标检测客户端</view>
			
			<view class="logincc">
				<view class="ccitem">
					<label>手机号码：</label>
					<input placeholder="请输入您的手机号码" v-model="number" @input="handleInput" class="ccitemi" />
				</view>
				<text style="color: #FF0000;font-size: 28rpx;margin-left: -100rpx;" v-show="!isValid">手机号码格式不对</text>
				<view class="ccitem">
					<input placeholder="请输入验证码" v-model="code" class="ccitemi" />
					<jp-verification-literalness ref="literalness" :isCaseCheck="false" contentHeight="40" @getCode="getCode" :securityCode="securityCode"></jp-verification-literalness>
				</view>
				
				<button class="loginsub" @click="verification">查询</button>
			</view>

			<!-- <view class="applyfor">申请获取以下权限</view> -->

			<!-- <button open-type="getPhoneNumber" class="loginsub" @getphonenumber="getPhoneNumber">授权并获取手机号</button> -->

		</view>

	</view>
</template>

<script>
	import jpVerification from '@/uni_modules/jp-verification-literalness/components/jp-verification-literalness/jp-verification-literalness.vue';
	// 引入胶囊
	import {
		// getNavBarHeight,
		getStatusBarHeight,
		getTitleBarHeight
	} from "@/utils/system";
	
	import {
		debounce
	} from "@/utils/common";
	
	export default {
		components: {
		    jpVerification
		},
		data() {
			return {
				// navBarHeight: getNavBarHeight(),
				securityCode:"",
				number:"",
				code:"",
				isValid:true,
				titleBarHeight: getTitleBarHeight(),
				statusBarHeight: getStatusBarHeight(),
			}
		},
		methods: {
			// 返回上一页
			onClickBack() {
				uni.navigateBack();
			},
			getCode(){
				this.securityCode = '重新获取了';
			},
			verification(){
				if(!this.number){
					return this.$toast({
						title:"请输入手机号码"
					})
				}
				if(!this.isValid){
					return this.$toast({
						title:"手机号码格式不对"
					})
				}
				if(!this.code){
					return this.$toast({
						title:"请输入验证码"
					})
				}
				const isCode = this.$refs.literalness.verification(this.code)  //验证123456是否通过验证
				if(!isCode){
					return this.$toast({
						title:"验证码错误"
					})
				}
				
				this.$goto(`/pagesActivity/activity/customer?number=${this.number}`)
				
			},
			handleInput:debounce(async function(e){
				// const phoneRegex = /^134[0-8]\d{7}$|^13[^4]\d{8}$|^14[5-9]\d{8}$|^15[^4]\d{8}$|^l6[6]\d{8}$|^17[0-8]\d{8}$|^18[\d]{9}$|^19[8,9]\d{8}$/;
				const phoneRegex = /^1[3-9]\d{9}$/;
				// 如果是有效手机号，返回 true，否则返回 false
				this.isValid = phoneRegex.test(e.detail.value);
			}, 500),
			// 获取手机号
			// getPhoneNumber(e) {
			//     if (e.detail.errMsg === "getPhoneNumber:ok") {
			//         let that = this;
			//         // 用户授权成功，获取加密数据
			//         const encryptedData = e.detail.encryptedData;
			//         const iv = e.detail.iv;
			//         // 显示加载提示
			//         uni.showLoading({
			//             title: '加载中...'
			//         });
			        
			//         // 获取用户的 wx.login code
			//         uni.login({
			//             provider: 'weixin',
			//             success: async (res) => {
			//                 const code = res.code; // 获取登录凭证 code
			//                 // 发送 encryptedData 和 code 到后端进行手机号解密
			//                 try {
			//                     /**
			//                     * 获取小程序手机号码(登录接口)
			//                     */
			//                     // await getProgramEncryptNumber();
			//                     uni.request({
			//                         url:'https://limsapi.gzhbcss.com/api/getNumber',
			//                         method:'POST',
			//                         data:{
			//                             jsCode: code,
			//                             encryptedData: encryptedData,
			//                             iv: iv
			//                         },
			//                         success: async (result) => {
			//                             uni.hideLoading();  // 隐藏加载提示
			//                             if (result.data.code == 200) {
			//                                 this.$goto(`/pagesActivity/activity/customer?number=${result.data.msg}`)
			//                             } else {
			//                                 uni.showToast({
			//                                     title: "获取号码失败",
			//                                     icon: 'none',
			//                                     duration: 2000
			//                                 });
			//                             }
			//                         },
			//                         fail(error) {
			//                             uni.hideLoading();  // 隐藏加载提示
			//                             uni.showToast({
			//                                 title: "获取号码失败",
			//                                 icon: 'none',
			//                                 duration: 2000
			//                             });
			//                         }
			//                     });
			
			//                 } catch (error) {
			//                     uni.hideLoading();  // 隐藏加载提示
			//                     console.error("请求失败", error);
			//                     uni.showToast({
			//                         title: '请求失败，请稍后再试',
			//                         icon: 'none',
			//                         duration: 2000
			//                     });
			//                     return false;
			//                 }
			//             }
			//         });
			//     } else {
			//         uni.showToast({
			//             title: '用户取消授权',
			//             icon: 'none',
			//             duration: 2000
			//         });
			//     }
			// }

		},
	}	
</script>

<style lang="scss">
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
		// background-color: #F9FAFB;
		background-image: linear-gradient(to right, rgba(224, 247, 237, 1), rgba(235, 243, 254, 1));
		height: 100%;
	}

	.login {
		.left-icon {
			margin-left: 30rpx;
		}
		.logoc {
			text-align: center;
			margin: 0 auto;
			padding: 20rpx 16px 60rpx;
			.applyfor{
				font-size: 29rpx;
				margin-top: 100rpx;
				// text-align: center;
			}
			.lotitle {
				font-size: 32rpx;
				// font-weight: bold;
				margin-top: -130rpx;
			}
			.logincc{
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10px 40rpx;
				margin-top: 80rpx;
				.ccitem{
					display: flex;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #ddd;
					font-size: 28rpx;
					align-items: center;
					.ccitemi{
						flex: 1;
						text-align: left;
						padding-left: 10rpx;
					}
				}
				
				.loginsub {
					width: 550rpx;
					height: 95rpx;
					border-radius: 60rpx;
					font-size: 25rpx;
					text-align: center;
					line-height: 95rpx;
					color: #fff;
					margin: 20rpx auto 0rpx;
					// margin: 140rpx auto 0rpx;
					background-color: #5385fe;
				}
			}
			

		}
	}
	
</style>